import React, { Component } from "react";
import "./tabbar.less";
import { baseRoutes } from "../../../router/index";
import { Link } from "react-router-dom";
import { withTranslation } from "react-i18next";

class Tabbar extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    const {t} = this.props;
    return (
      <div className="tabbar">
        {baseRoutes.map((item, index) => {
          if (["Home", "User"].includes(item.meta.title)) {
            if (item.name === this.props.routeName) {
              return (
                <div className="tabbar_item" key={index}>
                  <Link to={item.path} className="on">
                    {t(item.meta.title)}
                  </Link>
                </div>
              );
            } else {
              return (
                <div className="tabbar_item" key={index}>
                  <Link to={item.path}>{t(item.meta.title)}</Link>
                </div>
              );
            }
          }
        })}
      </div>
    );
  }
}

export default withTranslation()(Tabbar);
